<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>头部</title>
		<style>
			body{
				font: 14px/1 "Microsoft YaHei","微软雅黑","arial","tahoma","MicrosoftJhengHei", "sans-serif";
				    -webkit-text-size-adjust: 100%;
				    -ms-text-size-adjust: 100%;
				    -webkit-font-smoothing: antialiased!important;
						overflow: hidden;
			}
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				 text-decoration:none;
			}
			/* 导航菜单 */
			.header-bd {
				width: 100%;
				height: 65px;
				background-position: 0 0;
				background-color: rgba(0, 0, 0, 0.6);
				position: relative;
				min-width: 1200px;
				background-size: auto;
				position: sticky;
				top: 0;
				z-index: 1000;
			}
			.header {
				width: 1200px;
				height: 65px;
				position: relative;
				margin: 0 auto;
			}
			.logo{
				position: absolute;
				left: 8px;
				top: 6px;
				z-index: 41;
			}
			.logo img{
				width: 93px;
				height: 52px;
			}
			.nav-bd{
				width: 622px;
				height: 47px;
				position: absolute;
				left:568px;
				top: 9px;
				z-index: 39;
			}
			.nav-bd>ul{
				height: 47px;
				display: flex;
				background-color: transparent;
				background-image: none;
				background-repeat: no-repeat;
			}
			.nav-bd>ul>li{
				width: 16.6666666666667%;
				height: 47px;
				line-height: 47px;
			}
			.nav-bd>ul>li>div>a{
				width: 73.66px;
				color: #fff;
				font-weight: 400;
				font-style: normal;
				display: block;
				text-align: center;
				margin: 0 auto;
			}
			.nav-bd>ul>li>div>a>span {
				font-family: Arial;
				font-weight: bold;
			}
			.home .sliding {
				height: 1px;
				background-color: rgb(61, 133, 198);
				z-index: 1;
			}
			.sliding {
				transition: all 0.2s;
			}
			.nav-bd>ul>li>ol{
				position: absolute;
				height: 0;
				width:103px;
				background-color: rgba(255, 255, 255, 0.59);
				z-index: 100;
				margin-top: 0;
				margin-bottom: 0;
				padding-top: 0;
				padding-bottom: 0;
				overflow: hidden;
				transition: all 0.5s;
			}
			.nav-bd>ul>li>ol>li{
				height: 47px;
				text-align: center;	
			}
			.nav-bd>ul>li>ol>li>a{
				padding:0 15px;
				height: 100%;
				display: block;
				line-height: 47px;
			}
			.nav-bd>ul>li>ol>li>a>span{
				color: #4a4a4a;
				font-size: 12px;
				font-family: 'Microsoft YaHei';
				font-weight: normal;
			}
			.nav-bd>ul>li:hover>ol{
				height: 94px;
				transition: all 0.5s;
			}
			.nav-bd>ul>li:hover>div>.sliding {
				height: 1px;
				background-color: rgb(61, 133, 198);
				z-index: 1;1
			}
			/* .nav-bd>ul>li:active>div>a>span {
				color:#fff;
			} */
			.nav-bd>ul>li:hover>div>a>span {
				color:#3d85c6;
				font-weight: normal;
			}
			.nav-bd>ul>li>ol>li:hover>a{
				background-color: #fff;
			}
			.nav-bd>ul>li>ol>li:hover>a>span{
				color: #3d85c6;
			}
			/* 首页图片 */
			.top {
				width: 100%;
				height: 612px;
				background-color: rgb(0, 0, 0);
				position: absolute;
				top: 0;
			}
			.banner-bd{
				width: 1200px;
				height: 612px;
				margin: 0 auto;
				z-index: 30;
				position: relative;
			}
			strong{
				width: 532px;
				height: 56px;
				color: #fff;
				font-weight: bold;
				font-size: 44px;
				position: absolute;
				left: 50px;
				top: 149px;
				z-index: 3;
			}
			.eng{
				width: 483px;
				height: 66px;
				color: #fff;
				position: absolute;
				left: 95px;
				top: 220px;
				z-index: 4;
			}
			.eng span{
				font-size: 18px;
			}
			.text{
				width: 483px;
				height: 64px;
				color: #fff;
				position: absolute;
				left: 115px;
				top: 306px;
				z-index: 4;
			}
			.text span{
				font-size: 28px;
				font-family: SimSun;
				font-weight: bold;
			}
			.banner {
				position: absolute;
				right: 20px;
				bottom: 120px;
			}
			.banner img {
				width: 426px;
				height: 303px;
			}
		</style>
		<link rel="stylesheet" href="./title.css">
	</head>
	<body>
		<!-- 头部整体 -->
		<div class="header-bd">
			<!-- 头部主体 -->
			<div class="header">
				<!-- logo图标 -->
				<div class="logo">
					<a target="_self" href="#"><img src="./shuize/jiyuxuan-img/logo.png" alt=""></a>
				</div>
				<!-- 导航菜单 -->
				<div class="nav-bd">
					<ul class="nav">
						<li class="home">
							<div>
								<a href="#">
									<span>首页</span>
								</a>
								<div class="sliding"></div>
							</div>
						</li>
						<li>
							<div>
								<a href="#">
									<span>产品中心</span>
								</a>
								<div class="sliding"></div>
							</div>
						</li>
						<li>
							<div>
								<a href="#">
									<span>解决方案</span>
								</a>
								<div class="sliding"></div>
							</div>
						</li>
						<li>
							<div>
								<a href="#">
									<span>媒体中心</span>
								</a>
								<div class="sliding"></div>
							</div>
							<ol>
								<li><a href="#"><span>公司动态</span></a></li>
								<li><a href="#"><span>官方视频</span></a></li>
							</ol>
						</li>
						<li>
							<div>
								<a href="#">
									<span>关于我们</span>
								</a>
								<div class="sliding"></div>
							</div>
							<ol>
								<li><a href="#"><span>公司介绍</span></a></li>
								<li><a href="#"><span>联系信息</a></li>
							</ol>
						</li>
						<li>
							<div>
								<a href="#">
									<span>服务与支持</span>
								</a>
								<div class="sliding"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 首页图片 -->
		<div class="top">
			<div class="banner-bd">
				<strong>西安水泽动力科技有限公司</strong>
				<p class="eng"><span>Xi'an Underwater Dynamics Technology Co.,Ltd</span></p>
				<p class="text"><span>移动智能科技 赋予水域感知</span></p>
				<div class="banner">
					<img src="./shuize/jiyuxuan-img/banner.png" alt="">
				</div>
			</div>
		</div>
	</body>
</html>
